<meta charset="utf-8">
<section class="content-header">
	<ol class="breadcrumb">
		<li><a href="/manager"><i class="fa fa-dashboard"></i> 首页</a></li>
		<li class="active">管理首页</li>
	</ol>
</section>
<!-- Main content -->
<section class="content">
	<div class="row">
		<div class="col-lg-3 col-xs-6">
			<div class="small-box bg-aqua">
				<div class="inner">
					<h3 th:text="${commentNums}">15</h3>
					<p>新留言</p>
				</div>
				<div class="icon">
					<i class="ion ion-chatbubbles"></i>
				</div>
				<a href="/manager#comments" class="small-box-footer">更多 <i
					class="fa fa-arrow-circle-right"></i></a>
			</div>
		</div>
		<div class="col-lg-3 col-xs-6">
			<div class="small-box bg-green">
				<div class="inner">
					<h3 th:text="${subjectNums}">
						53<sup style="font-size:20px">%</sup>
					</h3>
					<p>总课程数</p>
				</div>
				<div class="icon">
					<i class="icon ion-compose"></i>
				</div>
				<a href="/manager#subjects" class="small-box-footer">更多 <i
					class="fa fa-arrow-circle-right"></i></a>
			</div>
		</div>
		<div class="col-lg-3 col-xs-6">
			<div class="small-box bg-yellow">
				<div class="inner">
					<h3 th:text="${userNums}"></h3>
					<p>用户量</p>
				</div>
				<div class="icon">
					<i class="ion ion-person-add"></i>
				</div>
				<a href="/manager#users" class="small-box-footer">更多 <i
					class="fa fa-arrow-circle-right"></i></a>
			</div>
		</div>
		<div class="col-lg-3 col-xs-6">
			<div class="small-box bg-red">
				<div class="inner">
					<h3 th:text="${questionNums}"></h3>

					<p>题库量</p>
				</div>
				<div class="icon">
					<i class="ion ion-cube"></i>
				</div>
				<a href="/manager#questions" class="small-box-footer">更多 <i
					class="fa fa-arrow-circle-right"></i></a>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6">
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">最近发布的考试</h3>
					<div class="box-tools pull-right">
						<button type="button" class="btn btn-box-tool" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
						<button type="button" class="btn btn-box-tool" data-widget="remove">
							<i class="fa fa-times"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
					<ul class="products-list product-list-in-box" id="examList"></ul>
				</div>
				<div class="box-footer text-center">
              		<a href="/manager#exams" class="uppercase">查 看 更 多 考 试</a>
            	</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="box box-danger">
				<div class="box-header with-border">
					<h3 class="box-title">学院和学生人数统计</h3>
					<div class="box-tools pull-right">
						<button type="button" class="btn btn-box-tool" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
						<button type="button" class="btn btn-box-tool" data-widget="remove">
							<i class="fa fa-times"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
					<div id="pieChart" style="width:100%;height:325px"></div>
				</div>
			</div>
		</div>
	</div>
</section>
<script type="text/javascript">
	$(function () {
		Core.postAjax("/api/aes","",function (data) {
            if(data.status==200){
            	build_exam_li(data);
            }else{
            	layer.msg(data.msg);
            }
        })
        
		Core.postAjax("/api/aps","",function (data) {
            if(data.status==200){
                getData(data);
            }else{
            	layer.msg(data.msg);
            }
        })
        
        function getData(data){
			var data = data.data;
			var legendData = [];
            var seriesData = [];
            for (var i = 0; i < data.length; i++) {
                name = data[i].institute_name;
                legendData.push(name); 
                seriesData.push({
                    name: name,
                    value: data[i].num
                });
            }

			//初始化echarts实例
	        var myChart = echarts.init(document.getElementById('pieChart'));
			
	        //指定图表的配置项和数据
	        option = {
	       	    tooltip : {
	       	        trigger: 'item',
	       	        formatter: "{a} <br/>{b} : {c} 人"
	       	    },
	       	    legend: {
	       	        left: 'left',
	       	        data: legendData
	       	    },
	       	    series : [
	       	        {
	       	            name: '数据来源',
	       	            type: 'pie',
	       	            radius : '70%',
	       	            center: ['50%', '50%'],
	       	            data: seriesData,
	       	            itemStyle: {
	       	                emphasis: {
	       	                    shadowBlur: 10,
	       	                    shadowOffsetX: 0,
	       	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	       	                }
	       	            }
	       	        }
	       	    ]
	       	}
	      	//使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option);
		}
	})
	
	function build_exam_li(data){
		var exams = data.data;
		if(!exams.length == 0){
			$.each(exams, function(index, items){
				var statusSpan;
				var imgDiv = $("<div class='product-img'></div>").append("<img src='"+items.img+"'/>");
				if(items.status == 0){
					statusSpan = $("<span>未开始</span>").addClass("label label-warning pull-right");
				}else if(items.status == 1){
					statusSpan = $("<span>进行中</span>").addClass("label label-success pull-right");
				}else{
					statusSpan = $("<span>已结束</span>").addClass("label label-danger pull-right");
				}
				var titleA = $("<a href='/manager#exams' class='product-title'></a>").append(items.title).append(statusSpan);
				var desSpan = $("<span style='padding-top:5px'>"+items.nickname+"于"+items.create_time+"发布考试啦!</span>").addClass("product-description");
				var infoDiv = $("<div class='product-info'></div>").append(titleA).append(desSpan);
				$("<li class='item'></li>").append(imgDiv).append(infoDiv).appendTo("#examList");
			})
		}else{
			$("<li class='item'>最近没有发布考试</li>").appendTo("#examList");
		}
	}
</script>
